<template>
  <el-form
    ref="formRef"
    @submit.native.prevent
    :model="ruleForm1"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    status-icon
    style="margin-top: 60px"
  >
    <el-form-item label="手机号码" prop="phone">
      <el-input
        v-model.number="ruleForm1.phone"
        style="width: 260px"
        maxlength="11"
        placeholder="请输入手机号"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm(formRef)"
        style="margin-top: 200px; height: 40px"
      >
        下一步
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
  setup(prop, { emit }) {
    const ruleForm1 = reactive({
      phone: '',
    });
    const rules = reactive({
      phone: [
        {
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
        },
      ],
    });
    const formRef = ref();

    function submitForm(ruleForm) {
      ruleForm.validate((valid) => {
        if (valid) {
          emit('upChange', 1, 2, ruleForm1.phone); // 输入手机号提交成功
        } else {
          return false;
        }
      });
    }
    return {
      ruleForm1,
      rules,
      formRef,
      submitForm,
    };
  },
});
</script>
